import { useRef } from "react";
import { Image, message, Popconfirm, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { history } from "umi";
import ProForm, {
  ModalForm,
  ProFormRadio,
  ProFormDigit,
  ProFormTextArea,
  ProFormDependency,
} from "@ant-design/pro-form";
import {
  fetchPackageList,
  afterSaleAudit,
} from "@/api/order";
import { schoolbagStatusOptions, orderPackageStatusOptions } from "@/const";

export default () => {
  const columns = [
    {
      title: "订单号",
      dataIndex: "orderNo",
      search: true,
    },
    {
      title: "订单状态",
      dataIndex: "orderStatus",
      valueType: "select",
      fieldProps: {
        options: orderPackageStatusOptions,
      },
      formItemProps: {
        // initialValue: "0",
      },
    },
    {
      title: "书包名称",
      dataIndex: "name",
      render: (_, record) => {
        return record.schoolbag?.name || "-";
      },
    },
    {
      title: "金额",
      dataIndex: "orderAmount",
      search: false,
    },
    {
      title: "下单人名称",
      dataIndex: "createUserName",
    },
    {
      title: "下单人手机号",
      dataIndex: "createUserPhone",
      search: false,
    },
    {
      title: "收货人名称",
      dataIndex: "userName",
    },
    {
      title: "收货人手机号",
      dataIndex: "mobile",
      search: false,
    },
    {
      title: "组号",
      dataIndex: "schoolbagGroupCode",
      search: false,
    },
    {
      title: "期数",
      dataIndex: "cycle",
      search: false,
      render: (_, record) => {
        return `${record.schoolbagCurrentNum || "-"} / ${
          record.schoolbag?.cycle || 12
        }`;
      },
    },
    {
      title: "服务状态",
      dataIndex: "schoolbagStatus",
      valueType: "select",
      fieldProps: {
        options: schoolbagStatusOptions,
      },
      formItemProps: {
        // initialValue: "0",
      },
    },
  ];

  // 退款
  const formRef = useRef();

  const renderReturnMoneyFormModal = (record, actionRef) => {
    const handleAddOrUpdate = async (fields) => {
      const postData = {
        id: record.id,
        ...fields,
      };
      const res = await afterSaleAudit(postData);
      if (res.data) {
        message.success("审核成功");
        actionRef?.current.reload();
        return true; // 关闭弹框
      }
    };

    return (
      <ModalForm
        key="refund"
        labelCol={{
          span: 4,
        }}
        formRef={formRef}
        layout="horizontal"
        title="审批"
        width={600}
        trigger={
          <Button style={{ marginRight: 10 }} type="primary">
            审批
          </Button>
        }
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
        }}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
        initialValues={{
          ...record,
          actualRefundMoney: record.afterSaleRefundMoney,
        }}
      >
        <ProFormRadio.Group
          label="是否通过"
          name="auditStatus"
          options={[
            {
              value: 1,
              label: "通过",
            },
            {
              value: 2,
              label: "驳回",
            },
          ]}
          rules={[
            {
              required: true,
              message: "请选择是否通过",
            },
          ]}
        />

        <ProFormTextArea
          fieldProps={{
            rows: 5,
          }}
          name="refundDescription"
          label="问题说明"
          placeholder="请输入问题说明"
        />

        <ProFormDependency name={["auditStatus"]}>
          {({ auditStatus }) => {
            return (
              auditStatus == 1 && (
                <ProFormDigit
                  label="退款金额"
                  name="actualRefundMoney"
                  placeholder="请输入退款金额"
                  min={0.01}
                  max={record.orderAmount}
                  rules={[
                    { required: true, message: "请输入退款金额" },
                    {
                      validator: async (_, value) => {
                        if (value && value > record.orderAmount) {
                          return Promise.reject(
                            new Error("退款金额不能大于订单金额")
                          );
                        }
                      },
                    },
                  ]}
                />
              )
            );
          }}
        </ProFormDependency>
      </ModalForm>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        title: "",
        renderAdd: () => {},
        columns,
        modalWidth: 400,
        fetchList: fetchPackageList,
        actionColumnWidth: 200,
        showCheckbox: false,
        renderAction: (_, record, renderModalForm, actionRef) => {
          return (
            <>
              <Button
                style={{ marginRight: 8 }}
                onClick={() => {
                  history.push(`/order/package/detail?orderId=${record.id}`);
                }}
              >
                详情
              </Button>
              {record.orderStatus == 6
                ? renderReturnMoneyFormModal(record, actionRef)
                : null}
            </>
          );
        },
      })}
    </PageContainer>
  );
};
